<template>
	<cmDialog v-model="dialogState" :modal-title="props.isView ? '详情' : '编辑'" model-width="1000px">
		<el-form ref="baseFormRef" :model="baseForm" :rules="props.isView ? {} : rules" label-width="150px">
			<el-row v-if="props.isAudit || baseForm.projectNumber">
				<el-col :span="8">
					<el-form-item label="项目编号" prop="projectNumber">
						<el-input v-model="baseForm.projectNumber" placeholder="请输入" :disabled="props.isView || !props.isAudit" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="项目名称" prop="researchName">
						<el-input v-model="baseForm.researchName" placeholder="请输入" disabled />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="承担单位" prop="responsibleEnt">
						<el-input v-model="baseForm.responsibleEnt" placeholder="请输入" disabled />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="联系人" prop="contacts">
						<el-input v-model="baseForm.contacts" placeholder="请输入" disabled />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="联系人电话" prop="contactsTel">
						<el-input v-model="baseForm.contactsTel" placeholder="请输入" disabled />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="联系人邮箱" prop="contactsEmail">
						<el-input v-model="baseForm.contactsEmail" placeholder="请输入" disabled />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="负责人" prop="principal">
						<el-input v-model="baseForm.principal" placeholder="请输入" disabled />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="负责人电话" prop="principalTel">
						<el-input v-model="baseForm.principalTel" placeholder="请输入" disabled />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="负责人邮箱" prop="principalEmail">
						<el-input v-model="baseForm.principalEmail" placeholder="请输入" disabled />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="课题总经费(万元)" prop="projectFunding">
						<el-input v-model="baseForm.projectFunding" placeholder="请输入" disabled />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="申请经费(万元)" prop="applyFunding">
						<el-input v-model="baseForm.applyFunding" placeholder="请输入" disabled />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="自筹经费(万元)" prop="selfFunding">
						<el-input v-model="baseForm.selfFunding" placeholder="请输入" disabled />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="营业执照盖章版PDF">
						<div v-if="businessLicense" class="filename input" @click="handleDownLoadFile(businessLicense)">
							{{ businessLicense.fileRealName }}.pdf
						</div>
						<div v-else class="none input">未上传</div>
						<el-upload
							:action="uploadApi"
							:headers="uploadHeaders"
							:data="{ extCode: 'ResearchBusinessLicense', remark: '营业执照盖章版pdf' }"
							accept=".pdf"
							:show-file-list="false"
							:on-success="handleBusinessLicenseSuccess"
							:before-upload="beforeUploadPdf"
						>
							<el-button v-if="baseForm.processStage == '3' && !props.isView && !props.isAudit">上传</el-button>
						</el-upload>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="合同盖章版PDF">
						<div v-if="contract" class="filename input" @click="handleDownLoadFile(contract)">{{ contract.fileRealName }}.pdf</div>
						<div v-else class="none input">未上传</div>
						<el-upload
							:action="uploadApi"
							:headers="uploadHeaders"
							:data="{ extCode: 'ResearchContract', remark: '合同盖章版pdf' }"
							accept=".pdf"
							:show-file-list="false"
							:on-success="handleContractSuccess"
							:before-upload="beforeUploadPdf"
						>
							<el-button v-if="baseForm.processStage == '3' && !props.isView && !props.isAudit">上传</el-button>
						</el-upload>
					</el-form-item>
				</el-col>
			</el-row>
			<dl v-if="Number(baseForm.processStage) >= 3" class="descriptions">
				<dt>开题资料</dt>
				<dd v-for="(item, index) in kaitiFile" :key="index">
					<div class="label">
						{{ item.definitionName }}
					</div>
					<div class="value">
						<div
							v-if="baseForm.openingFileList.find(file => file.extCode === item.businessCode)?.fileRealName"
							class="filename"
							@click="handleDownLoadFile(baseForm.openingFileList.find(file => file.extCode === item.businessCode))"
						>
							{{ baseForm.openingFileList.find(file => file.extCode === item.businessCode)?.fileRealName + '.' + item.suffixType }}
						</div>
						<div v-else class="none">未上传</div>
						<el-upload
							:action="uploadApi"
							:headers="uploadHeaders"
							:data="{ extCode: item.businessCode, remark: item.remark }"
							:accept="fileType(item.suffixType)"
							:show-file-list="false"
							:on-success="handleKaiTiSuccess"
							:before-upload="(file: any) => beforeUpload(file, item)"
						>
							<el-button v-if="Number(baseForm.processStage) == 3 && !props.isView && !props.isAudit">上传</el-button>
						</el-upload>
					</div>
				</dd>
				<dd>
					<div class="label">开题截止日期</div>
					<div class="value">
						{{ baseForm.openingDeadline ? baseForm.openingDeadline.slice(0, 10) : '' }}
					</div>
				</dd>
				<dd>
					<div class="label"><span>*</span>实际开题日期</div>
					<div class="value">
						<el-date-picker
							v-model="baseForm.actualOpeningDate"
							type="date"
							placeholder="请选择日期"
							style="width: 100%"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
							:default-time="defaultTime"
							:disabled="Number(baseForm.processStage) != 3 || props.isView || props.isAudit"
						/>
					</div>
				</dd>
				<dd v-if="kaitiFile.length % 2 !== 0">
					<div class="label"></div>
					<div class="value"></div>
				</dd>
			</dl>
			<div style="display: flex; justify-content: center; padding-bottom: 10px">
				<el-button v-if="Number(baseForm.processStage) == 4 && !props.isView" type="danger" @click="handleReturnBack">退回</el-button>
			</div>
			<dl v-if="Number(baseForm.processStage) >= 4" class="descriptions">
				<dt>中期资料</dt>
				<dd v-for="(item, index) in zhongqiFile" :key="index">
					<div class="label">
						{{ item.definitionName }}
					</div>
					<div class="value">
						<div
							v-if="baseForm.midfilesFileList.find(file => file.extCode === item.businessCode)?.fileRealName"
							class="filename"
							@click="handleDownLoadFile(baseForm.midfilesFileList.find(file => file.extCode === item.businessCode))"
						>
							{{ baseForm.midfilesFileList.find(file => file.extCode === item.businessCode)?.fileRealName + '.' + item.suffixType }}
						</div>
						<div v-else class="none">未上传</div>
						<el-upload
							:action="uploadApi"
							:headers="uploadHeaders"
							:data="{ extCode: item.businessCode, remark: item.remark }"
							:accept="fileType(item.suffixType)"
							:show-file-list="false"
							:on-success="handleZhongQiSuccess"
							:before-upload="(file: any) => beforeUpload(file, item)"
						>
							<el-button v-if="Number(baseForm.processStage) == 4 && !props.isView && !props.isAudit">上传</el-button>
						</el-upload>
					</div>
				</dd>
				<dd>
					<div class="label">中期截止日期</div>
					<div class="value">
						{{ baseForm.midtermDeadline ? baseForm.midtermDeadline.slice(0, 10) : '' }}
					</div>
				</dd>
				<dd>
					<div class="label"><span>*</span>实际中期日期</div>
					<div class="value">
						<el-date-picker
							v-model="baseForm.actualMidtermDate"
							type="date"
							placeholder="请选择日期"
							style="width: 100%"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
							:default-time="defaultTime"
							:disabled="Number(baseForm.processStage) != 4 || props.isView || props.isAudit"
						/>
					</div>
				</dd>
				<dd v-if="kaitiFile.length % 2 !== 0">
					<div class="label"></div>
					<div class="value"></div>
				</dd>
			</dl>
			<div style="display: flex; justify-content: center; padding-bottom: 10px">
				<el-button v-if="Number(baseForm.processStage) == 5 && !props.isView" type="danger" @click="handleReturnBack">退回</el-button>
			</div>
			<dl v-if="Number(baseForm.processStage) >= 5" class="descriptions">
				<dt>结题资料</dt>
				<dd v-for="(item, index) in jietiFile" :key="index">
					<div class="label">
						{{ item.definitionName }}
					</div>
					<div class="value">
						<div
							v-if="baseForm.conclusionFileList.find(file => file.extCode === item.businessCode)?.fileRealName"
							class="filename"
							@click="handleDownLoadFile(baseForm.conclusionFileList.find(file => file.extCode === item.businessCode))"
						>
							{{ baseForm.conclusionFileList.find(file => file.extCode === item.businessCode)?.fileRealName + '.' + item.suffixType }}
						</div>
						<div v-else class="none">未上传</div>
						<el-upload
							:action="uploadApi"
							:headers="uploadHeaders"
							:data="{ extCode: item.businessCode, remark: item.remark }"
							:accept="fileType(item.suffixType)"
							:show-file-list="false"
							:on-success="handleJieTiSuccess"
							:before-upload="(file: any) => beforeUpload(file, item)"
						>
							<el-button v-if="Number(baseForm.processStage) == 5 && !props.isView && !props.isAudit">上传</el-button>
						</el-upload>
					</div>
				</dd>
				<dd>
					<div class="label">结题截止日期</div>
					<div class="value">
						{{ baseForm.completionDeadline ? baseForm.completionDeadline.slice(0, 10) : '' }}
					</div>
				</dd>
				<dd>
					<div class="label"><span>*</span>实际结题日期</div>
					<div class="value">
						<el-date-picker
							v-model="baseForm.actualCompletionDate"
							type="date"
							placeholder="请选择日期"
							style="width: 100%"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
							:default-time="defaultTime"
							:disabled="Number(baseForm.processStage) != 5 || props.isView || props.isAudit"
						/>
					</div>
				</dd>
				<dd v-if="kaitiFile.length % 2 !== 0">
					<div class="label"></div>
					<div class="value"></div>
				</dd>
			</dl>
		</el-form>
		<template #footer>
			<div class="dialog-foot">
				<el-button v-if="!props.isAudit && !props.isView" type="primary" @click="saveTemp">暂存</el-button>
				<el-button v-if="!props.isAudit && !props.isView && Number(baseForm.processStage) < 6" type="primary" @click="submitForm(baseFormRef)"
					>提交</el-button
				>
				<el-button v-if="props.isAudit && !props.isView && baseForm.processStage == '3'" type="primary" @click="saveForm(baseFormRef)"
					>提交</el-button
				>
				<el-button @click="closeModal">关闭</el-button>
			</div>
		</template>
	</cmDialog>
</template>
<script lang="ts" setup>
import { getDetail, returnBack, submitAudit, updateApi } from '@/api/Prospect-project/process-declare'
import { listApi } from '@/api/system/fifle'
import cmDialog from '@/components/cm-dialog/index.vue'
import { UploadFile } from '@/interface/declare'
import { useUserStore } from '@/store/modules/user'
import { downloadFile } from '@/utils/downLoadFile'
import type { FormInstance, UploadRawFile } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { computed, reactive, ref, watch } from 'vue'

const userStore = useUserStore()

const props = defineProps({
	modelValue: Boolean,
	editId: {
		type: String,
		default: ''
	},
	isView: Boolean,
	isAudit: {
		type: Boolean,
		default: false
	},
	showAudit: {
		type: Boolean,
		default: false
	}
})
const kaitiFile = ref([])
const zhongqiFile = ref([])
const jietiFile = ref([])

const emit = defineEmits(['update:modelValue', 'submit-success', 'dialog-cancel'])

const dialogState = computed({
	get: () => props.modelValue,
	set: val => emit('update:modelValue', val)
})

watch(
	() => dialogState.value,
	val => {
		if (val) {
			getInfo()
			getFileCodeList()
		}
	}
)

const getInfo = () => {
	getDetail({
		id: props.editId
	}).then(res => {
		baseForm.value = res.data
	})
}

const getFileCodeList = () => {
	listApi('1', {
		pageIndex: 1,
		pageSize: 10000
	}).then(res => {
		const list = res.data.list
		kaitiFile.value = list.filter(item => item.businessStage === 'OpeningThesis')
		zhongqiFile.value = list.filter(item => item.businessStage === 'MidTerm')
		jietiFile.value = list.filter(item => item.businessStage === 'Conclusion')
	})
}

const baseFormRef = ref<FormInstance>()
const baseForm = ref({
	id: '',
	researchName: '',
	principal: '',
	principalTel: '',
	principalEmail: '',
	contacts: '',
	contactsTel: '',
	contactsEmail: '',
	responsibleEnt: '',
	projectFunding: '',
	applyFunding: '',
	selfFunding: '',
	researchContents: '',
	techDifficulty: '',
	kpi: '',
	projectNumber: '',
	filingAbstract: '',
	filingKeywords: '',
	isPaper: 0,
	paperRemark: '',
	isBook: 0,
	bookRemark: '',
	isPatent: 0,
	patentRemark: '',
	isTrademark: 0,
	trademarkRemark: '',
	filingName: '',
	filingNumber: '',
	remark: '',
	actualOpeningDate: '',
	actualMidtermDate: '',
	actualCompletionDate: '',
	openingDeadline: '',
	midtermDeadline: '',
	completionDeadline: '',
	businessLicenseRecordList: [] as UploadFile[],
	contractRecordList: [] as UploadFile[],
	openingFileList: [] as UploadFile[],
	midfilesFileList: [] as UploadFile[],
	conclusionFileList: [] as UploadFile[],
	processStage: ''
})
const defaultTime = new Date(2000, 1, 1, 12, 0, 0)
const businessLicense = computed(() => {
	if (baseForm.value.businessLicenseRecordList.length > 0) {
		return baseForm.value.businessLicenseRecordList[0]
	} else {
		return ''
	}
})
const contract = computed(() => {
	if (baseForm.value.contractRecordList.length > 0) {
		return baseForm.value.contractRecordList[0]
	} else {
		return ''
	}
})
const uploadApi = `${import.meta.env.MODE === 'development' ? 'http://220.196.89.86:9173' : window.location.protocol + '//' + window.location.host}/JGBStandardWebApi/api/files/upload`
const uploadHeaders = {
	Authorization: userStore.token
}
const phoneOrLandlineValidator = (rule, value, callback) => {
	const phoneRegex = /^1[3-9]\d{9}$/
	const landlineRegex = /^(0\d{2,3})-?\d{7,8}$/

	if (!phoneRegex.test(value) && !landlineRegex.test(value)) {
		callback(new Error('请输入有效的手机号或座机号码'))
	} else {
		callback()
	}
}
const rules = reactive<any>({
	projectNumber: [{ required: true, message: '请输入项目编号', trigger: 'blur' }]
	// researchName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
	// contacts: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
	// contactsTel: [
	// 	{ required: true, message: '请输入联系电话', trigger: 'blur' },
	// 	{ validator: phoneOrLandlineValidator, trigger: 'blur' }
	// ],
	// contactsEmail: [
	// 	{ required: true, message: '请输入联系邮箱', trigger: 'blur' },
	// 	{
	// 		pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
	// 		message: '请输入有效的邮箱地址',
	// 		trigger: 'blur'
	// 	}
	// ],
	// principal: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
	// principalTel: [
	// 	{ required: true, message: '请输入负责人电话', trigger: 'blur' },
	// 	{ validator: phoneOrLandlineValidator, trigger: 'blur' }
	// ],
	// principalEmail: [
	// 	{ required: true, message: '请输入负责人邮箱', trigger: 'blur' },
	// 	{
	// 		pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
	// 		message: '请输入有效的邮箱地址',
	// 		trigger: 'blur'
	// 	}
	// ],
	// responsibleEnt: [{ required: true, message: '请输入承担单位', trigger: 'blur' }],
	// projectFunding: [
	// 	{ required: true, message: '请输入课题总经费', trigger: 'blur' },
	// 	{ pattern: /^\d+$/, message: '请输入数字', trigger: 'blur' }
	// ],
	// applyFunding: [
	// 	{ required: true, message: '请输入申请经费', trigger: 'blur' },
	// 	{ pattern: /^\d+$/, message: '请输入数字', trigger: 'blur' }
	// ],
	// selfFunding: [
	// 	{ required: true, message: '请输入自筹经费', trigger: 'blur' },
	// 	{ pattern: /^\d+$/, message: '请输入数字', trigger: 'blur' }
	// ]
})

const fileType = (type: string) => {
	let suffixType = ''
	switch (type) {
		case 'pdf':
			suffixType = '.pdf'
			break
		case 'doc':
			suffixType = '.doc, .docx'
			break
		case 'docx':
			suffixType = '.doc, .docx'
			break
		case 'xls':
			suffixType = '.xls, .xlsx'
			break
		case 'xlsx':
			suffixType = '.xls, .xlsx'
			break
	}
	return suffixType
}

const beforeUpload = (file: UploadRawFile, item: any) => {
	let allowedTypes = []
	switch (item.suffixType) {
		case 'pdf':
			allowedTypes = ['application/pdf']
			break
		case 'doc':
			allowedTypes = ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']
			break
		case 'docx':
			allowedTypes = ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']
			break
		case 'xls':
			allowedTypes = ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
			break
		case 'xlsx':
			allowedTypes = ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
			break
	}
	const fileExtension = file.name.split('.').pop()?.toLowerCase()
	if (!allowedTypes.includes(file.type) || fileType(item.suffixType).indexOf(fileExtension) === -1) {
		ElMessage.error('仅支持上传 ' + item.suffixType + '文件')
		return false
	}
	return true
}

const closeModal = () => {
	emit('update:modelValue', false)
}

const beforeUploadPdf = (file: UploadRawFile) => {
	const allowedTypes = ['application/pdf']
	const fileExtension = file.name.split('.').pop()?.toLowerCase()
	if (!allowedTypes.includes(file.type) || fileExtension !== 'pdf') {
		ElMessage.error('仅支持上传 PDF 文件')
		return false
	}
	return true
}

const handleBusinessLicenseSuccess = (res: any) => {
	if (res.code == '200') {
		baseForm.value.businessLicenseRecordList = []
		baseForm.value.businessLicenseRecordList.push(res.data)
	}
}

const handleContractSuccess = (res: any) => {
	if (res.code == '200') {
		baseForm.value.contractRecordList = []
		baseForm.value.contractRecordList.push(res.data)
	}
}

const updateFileList = (fileList: UploadFile[], newFile: UploadFile) => {
	const index = fileList.findIndex(item => item.extCode === newFile.extCode)
	if (index !== -1) {
		fileList[index] = newFile
	} else {
		fileList.push(newFile)
	}
	return fileList
}

const handleKaiTiSuccess = (res: { code: string; data: UploadFile }) => {
	if (res.code !== '200') {
		return
	}
	baseForm.value.openingFileList = updateFileList(baseForm.value.openingFileList, res.data)
	console.log(baseForm.value.openingFileList)
}

const handleZhongQiSuccess = (res: { code: string; data: UploadFile }) => {
	if (res.code !== '200') {
		return
	}
	baseForm.value.midfilesFileList = updateFileList(baseForm.value.midfilesFileList, res.data)
}

const handleJieTiSuccess = (res: { code: string; data: UploadFile }) => {
	if (res.code !== '200') {
		return
	}
	baseForm.value.conclusionFileList = updateFileList(baseForm.value.conclusionFileList, res.data)
}

const handleDownLoadFile = async (row: any) => {
	await downloadFile(row)
}

const handleReturnBack = () => {
	ElMessageBox.confirm(`是否退回项目？`, '温馨提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			returnBack({
				id: baseForm.value.id
			}).then(() => {
				ElMessage.success('操作成功')
				emit('submit-success')
			})
		})
		.catch(() => {})
}

const saveTemp = () => {
	updateApi(baseForm.value).then(res => {
		baseFormRef.value?.resetFields()
		emit('submit-success', res.data)
	})
}

const saveForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) {
		return
	}
	await formEl.validate((valid, fields) => {
		if (valid) {
			let form = { ...baseForm.value }
			updateApi(form).then(res => {
				ElMessage.success('操作成功！')
				baseFormRef.value?.resetFields()
				emit('submit-success', res.data)
			})
		} else {
			if (!fields) {
				return
			}
		}
	})
}

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) {
		return
	}

	await formEl.validate((valid, fields) => {
		if (valid) {
			// if (!baseForm.value.projectNumber) {
			// 	ElMessage.warning('需要由审核人员填写项目编号！')
			// 	return
			// }
			if (baseForm.value.processStage == '3') {
				if (!baseForm.value.actualOpeningDate) {
					ElMessage.error('请选择实际开题日期')
					return
				}
				baseForm.value.actualOpeningDate = baseForm.value.actualOpeningDate + ' 00:00:00'
			}
			if (baseForm.value.processStage == '4') {
				if (!baseForm.value.actualMidtermDate) {
					ElMessage.error('请选择实际中期日期')
					return
				}
				baseForm.value.actualMidtermDate = baseForm.value.actualMidtermDate + ' 00:00:00'
			}
			if (baseForm.value.processStage == '5') {
				if (!baseForm.value.actualCompletionDate) {
					ElMessage.error('请选择实际结题日期')
					return
				}
				baseForm.value.actualCompletionDate = baseForm.value.actualCompletionDate + ' 00:00:00'
			}
			let form = { ...baseForm.value }
			submitAudit(form).then(res => {
				ElMessage.success('操作成功！')
				baseFormRef.value?.resetFields()
				emit('submit-success', res.data)
			})
		} else {
			if (!fields) {
				return
			}
		}
	})
}
</script>
<style lang="scss" scoped>
.dialog-foot {
	display: flex;
	justify-content: center;
	margin-bottom: 10px;
	padding-bottom: 20px;
}

.descriptions {
	display: flex;
	flex-wrap: wrap;
	border-right: solid 1px #eee;
	border-bottom: solid 1px #eee;
	margin-bottom: 20px;

	dt {
		width: 100%;
		font-weight: bold;
		margin-bottom: 10px;
	}

	dd {
		width: calc(50% - 1px);
		display: flex;
		align-items: stretch;

		.label {
			background-color: #f5f7fa;
			width: 150px;
			padding: 15px 10px;
			border-top: solid 1px #eee;
			border-left: solid 1px #eee;
			display: flex;
			align-items: center;

			span {
				color: #f00;
				font-size: 16px;
				margin-right: 5px;
				margin-bottom: -7px;
			}
		}

		.value {
			border-top: solid 1px #eee;
			border-left: solid 1px #eee;
			padding: 10px;
			flex: 1;
			display: flex;
			align-items: center;
		}
	}
}

.filename {
	flex: 1;
	color: #5ab2ff;
	cursor: pointer;
}

.none {
	flex: 1;
	color: #999;
}

.input {
	border: solid 1px #dcdfe6;
	border-radius: 3px;
	text-indent: 10px;
	margin-right: 5px;
}
</style>
